*{padding: 0;margin: 0;}
body{
    width: 100%;
    height: 100vh;
    /* background-color: black; */
    background: url(../images/e.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

/* 头部标题 */
#head_logo_text{display: flex;top: 0;left: 0;}
#head_text{
    display: inline-block;
    font-size: 26px;
    letter-spacing: 0.1em;
    color: #fff;
    margin-left: 10px;
    line-height: 50px;
    font-weight: 700;
    text-shadow: 1px 1px 10px #2298e0;
}
#head_logo{
    width: 50px;
    height: 50px;
}

/* 可视化图 */
.map_box{
      position: relative;
      width: 70%;
      height: 100vh;
    }
#main_1{
      position: absolute;
      left: 0;
      top: -12%;
      width: 100%;
      height: 100%;
      z-index: 0;
      transition:all .5s;
      /* background-color:black; */
    }

/* 时间变化 */
#time_read{
    width: 250px;
    height: 120px;
    position: fixed;
    top:10%;
    left: 1%;
    color:#fff;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    padding-top:20px;
    background-image: url(../images/气泡框.png);
    filter: brightness(0.95);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-weight: 700;
    text-shadow: 1px 1px 10px #2298e0;
}

/* 检测数量 */
#check_place_num{
    color:#fff;
    font-size: 18px;
    letter-spacing: 0.1em;
    position: fixed;
    top:35%;
    left: 2%;
    font-weight: 700;
    text-shadow: 1px 1px 10px #2298e0;
}

/* 数据变化 */
#change_blood{
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 38%;
    bottom: 5%;
    box-sizing: border-box;
    padding: 20px;
    padding-left: 33px;
    width: 280px;
    height: 150px;
    background-image: url(../images/气泡框_2.webp);
    box-shadow: rgba(102, 172, 198,0.5) 0px 5px 10px 3px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color:#fff;
    text-shadow: 1px 1px 10px #01708c;
}
.user_box{
    display: flex;
    margin-bottom: 10px;
}
.user_box>#round{
    transform: translate(-14px,-8px);
    border-radius:50%;
    height: 38px;
    width: 38px;
    background-color: rgb(145, 19, 19);
    box-shadow: 0 0 5px white;
}
.user_name{
    margin-left: 10px;
    font-size: 22px;
    font-weight: 600;
    transform: translate(-7px,-2px);
}
.state{
    margin-top: 2px;
    margin-left: 74px;
    width: 20%;
    height: 50%;
    border: 1px solid rgb(92, 8, 92);
    border-radius: 20px;
    background-color: green;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
#body_check{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    padding-bottom: 15px;
}
#body_check>div{margin-bottom: 5px; transform: translateX(-12px); width:50%;font-size: 13px;font-weight: 800;letter-spacing: 0.08em;white-space: nowrap; /* 防止文字换行 */}
#change_blood .contact{
    transform: translateY(-10px);
    font-weight: 700;
    padding-left: 25px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: .5s;
}
#change_blood .contact:hover{
    color: #079a10;
}
.position{
  position: absolute;
  width:48px ;
  height: 48px;
  background: url(../images/红色坐标.gif) no-repeat;
  background-size: 100% 100%;
  transition: .2s;
}
/* 甘井子，旅顺口 */
.position_1{
  left: 16.5%;
  bottom: 22%;
}
.position_2{
  left: 20%;
  bottom: 29%;
}
.position_3{
  left: 25.5%;
  bottom: 32%;
}
.position_4{
  left: 28%;
  bottom: 35%;
}
/* 金州区 */
.position_5{
  left: 34%;
  bottom: 40%;
}
.position_6{
  left: 35%;
  bottom: 42%;
}
.position_7{
  left: 36%;
  bottom: 41%;
}
.position_8{
  left: 40%;
  bottom: 41%;
}
.position_9{
  left: 36%;
  bottom: 34%;
}
.position_10{
  left: 31.5%;
  bottom: 46%;
}
.position_11{
  left: 34%;
  bottom: 46.5%;
}
.position_12{
  left: 35.2%;
  bottom: 52%;
}
.position_13{
  left: 43%;
  bottom: 47%;
}
.position_14{
  left: 32%;
  bottom: 57%;
}
/* 瓦房店市 */
.position_15{
  left: 22%;
  bottom: 62%;
}
.position_16{
  left: 26.5%;
  bottom: 67%;
}
.position_17{
  left: 30%;
  bottom: 72%;
}
.position_18{
  left: 34%;
  bottom: 75%;
}
.position_19{
  left: 33%;
  bottom: 68%;
}
.position_20{
  left: 36%;
  bottom: 71%;
}
.position_21{
  left: 38%;
  bottom: 65.5%;
}
.position_22{
  left: 39.5%;
  bottom: 75%;
}
.position_23{
  left: 39.5%;
  bottom: 87%;
}
.position_24{
  left: 45%;
  bottom: 81%;
}
/* 普兰店区 */
.position_25{
  left: 46%;
  bottom: 72%;
}
.position_26{
  left: 51%;
  bottom: 77%;
}
.position_27{
  left: 54%;
  bottom: 70%;
}
.position_28{
  left: 53%;
  bottom: 63.5%;
}
.position_29{    /* 默认绿色坐标 */
  left: 48%;
  bottom: 55%;
}
.position_30{
  left: 42.5%;
  bottom: 56%;
}
/* 庄河市 */
.position_31{
  left: 58%;
  bottom: 64%;
}
.position_32{
  left: 62%;
  bottom: 72%;
}
.position_33{
  left: 61%;
  bottom: 81%;
}
.position_34{
  left: 65%;
  bottom: 79%;
}
.position_35{
  left: 70%;
  bottom: 72.5%;
}
/* 排他类名 */
.selected{
    background-image: url(../images/绿色坐标.gif);
}

#echar_pics{background-color:rgb(0, 0, 0);width: 37%;position: relative;position: fixed;top: 0;right: 0;
    height: 100%;display: flex;justify-content: center;flex-wrap: wrap;}
    #echar_pics>div{background-color: rgb(0, 0, 0);height: 24.6%;width: 100%;}
    #echar_pics .pie_box{display: flex;}
    #echar_pics .pie_box div{background-color: rgb(0, 0, 0);height: 100%;width: 50%;}





    /* <!-- ////////////////////////////////////////////////////////////////////
//                          _ooOoo_                               //
//                         o8888888o                              //
//                         88" . "88                              //
//                         (| ^_^ |)                              //
//                         O\  =  /O                              //
//                      ____/`---'\____                           //
//                    .'  \\|     |//  `.                         //
//                   /  \\|||  :  |||//  \                        //
//                  /  _||||| -:- |||||-  \                       //
//                  |   | \\\  -  /// |   |                       //
//                  | \_|  ''\---/''  |   |                       //
//                  \  .-\__  `-`  ___/-. /                       //
//                ___`. .'  /--.--\  `. . ___                     //
//              ."" '<  `.___\_<|>_/___.'  >'"".                  //
//            | | :  `- \`.;`\ _ /`;.`/ - ` : | |                 //
//            \  \ `-.   \_ __\ /__ _/   .-` /  /                 //
//      ========`-.____`-.___\_____/___.-`____.-'========         //
//                           `=---='                              //
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^        //
//         佛祖保佑       永无BUG     永不修改                  //
//////////////////////////////////////////////////////////////////// -->
<!-- 阿门~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> */